<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<ng-container [formGroup]="formGroup">
    <div>
        <lv-group lvGutter='8px' *ngIf="!includes(
            [ dataMap.Resource_Type.MySQLInstance.value,
              dataMap.Resource_Type.tdsqlInstance.value
            ],
            resourceType
            )" lvDirection='vertical' class="aui-gutter-column-sm">
            <span class="aui-form-label">{{'protection_db_config_label' | i18n}}</span>
            <lv-group lvGutter='16px'>
                <lv-switch formControlName="isModify"></lv-switch>
                <span class="aui-text-help-sm config-help" *ngIf="formGroup.value.isModify">
                    {{'protection_config_param_desc_label' | i18n}}
                </span>
            </lv-group>
        </lv-group>

        <ng-container *ngIf="formGroup.value.isModify && !includes(
            [ dataMap.Resource_Type.MySQLInstance.value,
              dataMap.Resource_Type.tdsqlInstance.value
            ],
            resourceType
            )">
            <lv-datatable [lvData]="tableData" #lvTable lvSize="small" [lvPaginator]='page'>
                <thead>
                    <tr>
                        <th [attr.width]="formGroup.value.restoreTo ? '160px':'220px'" lvCellKey="key" lvShowCustom>
                            <span>{{'protection_key_label' | i18n}}</span>
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByKey($event)"
                                    filterTitle="{{'protection_key_label' | i18n}}"></aui-custom-table-search>
                            </div>
                        </th>
                        <th [attr.width]="formGroup.value.restoreTo  ? '250px': (rowCopy?.uuid) ?'265px':'315px'"
                            lvCellKey="originParam" lvShowCustom>
                            <span>{{'protection_origin_config_params_label' | i18n}}</span>
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByOriginParam($event)"
                                    filterTitle="{{'protection_origin_config_params_label' | i18n}}"></aui-custom-table-search>
                            </div>
                        </th>
                        <th lvCellKey="newParam" lvShowFilter="true" (lvFilterChange)="filterChange($event)"
                            [(lvFilters)]="newFilterMap" lvFilterCheckAll>
                            {{'protection_new_config_params_label' | i18n}}
                        </th>
                    </tr>
                </thead>
                <tbody formArrayName="dbConfig">
                    <ng-container *ngFor="let item of lvTable.renderData">
                        <tr [formGroupName]="item.id">
                            <td>
                                <span lv-overflow>{{ item.key}}</span>
                            </td>
                            <td>
                                <span lv-overflow>{{item.originParam}}</span>
                            </td>
                            <td>
                                <lv-form-control class="database-config-writeable" [lvErrorTip]='newParamErrorTip'>
                                    <div style="padding: 4px 0">
                                      <input lv-input formControlName="newParam"
                                             placeholder="{{'protection_modify_param_desc_label' | i18n}}" />
                                    </div>
                                </lv-form-control>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
            <div class="aui-paginator-wrap">
                <lv-paginator #page [lvPageSize]="pageSize" [lvPageSizeOptions]='pageSizeOptions'
                    [hidden]="!tableData.length" lvShowPageSizeOptions="false" lvMode="simple">
                </lv-paginator>
            </div>
        </ng-container>
    </div>
</ng-container>
